window.onload = function () {
    var objDemo = document.getElementsByClassName("demo")[0];
    var objSmallBox = document.getElementsByClassName("small-box")[0];
    var objFloatBox = document.getElementsByClassName("float-box")[0];
    var smallImg = document.getElementsByClassName("small-box")[0];
    var objBigBox = document.getElementsByClassName("big-box")[0];
    var objBigBoxImage = document.getElementsByClassName("img")[0];
    smallImg.onmouseover = function () {//鼠标移入
        objFloatBox.style.display = "block"
        objBigBox.style.display = "block"
    }
    smallImg.onmouseout = function () {//鼠标移出事件
        objFloatBox.style.display = "none"
        objBigBox.style.display = "none"
    }
    smallImg.onmousemove = function (ev) {//鼠标移动
        var _event = ev;
        var left = _event.clientX - objDemo.offsetLeft - objSmallBox.offsetLeft
            - objFloatBox.offsetWidth / 2;
        var top = _event.clientY - objDemo.offsetTop - objSmallBox.offsetTop
            - objFloatBox.offsetHeight / 2;//获取鼠标中心点在图片上的位置

        if (left < 0) {//设置在一半的放大镜left为0
            left = 0;
        } else if (left > (objSmallBox.offsetWidth - objFloatBox.offsetWidth)) {
            left = objSmallBox.offsetWidth - objFloatBox.offsetWidth;
        }//如果超过总宽度left钉死为总宽度减去放大镜的宽度
        if (top < 0) {
            top = 0;
        } else if (top > (objSmallBox.offsetHeight - objFloatBox.offsetHeight)) {
            top = objSmallBox.offsetHeight - objFloatBox.offsetHeight;
        }
        //放大镜位置
        objFloatBox.style.left = left + "px";
        objFloatBox.style.top = top + "px";
        //计算所在位置的百分比
        var precentX = left / (objSmallBox.offsetWidth - objFloatBox.offsetWidth)
        var precentY = top / (objSmallBox.offsetHeight - objFloatBox.offsetHeight)

        objBigBoxImage.style.left = -precentX * (objBigBoxImage.offsetWidth - objBigBox.offsetWidth) + "px";
        objBigBoxImage.style.top = -precentY * (objBigBoxImage.offsetHeight - objBigBox.offsetHeight) + "px";
        objBigBoxImage.style.width = (objSmallBox.offsetWidth / objFloatBox.offsetWidth) * objBigBox.offsetWidth + "px";
        //显示放大的图片相对应的位置
    }
}